<template>
    <f7-page>
        <f7-navbar title="运输计划" back-link="返回"></f7-navbar>
                 <div class="box">
                                <div class="item-order">
                                    <div>
                                        <div class="float-left">
                                            <h2 class="text-white">{{passInfo.status == 'complete'?'计划已完成':'计划进行中'}}</h2>
                                            <h5 class="text-lightwhite ng-binding"></h5>
                                        </div>
                                         <!-- <i class="float-right">
                                            <img src="../../../assets/img/driver-car1.png" class="order-car">
                                         </i> -->
                                    </div>
                                </div>
               </div>

           <!--地址-->
        <f7-list>
            <div class="item-address">
                  <img src="../../assets/img/landmark.png" alt="" class="landmark">
                <h2 class="text-black">提货地址</h2>
                <h5 class="text-gray1">
                   个人地址：{{passInfo.send_city}}{{passInfo.send_district}}{{passInfo.send_addr}}
                </h5>
                <h5 class="text-gray1">
                  联系人：{{passInfo.receive_name}}&nbsp;&nbsp;&nbsp;&nbsp;手机号：{{passInfo.receive_phone}}

                </h5>
                <f7-icon f7="right" color="gray" class="color-gray"></f7-icon>
            </div>
            <div class="item-address">
                  <img src="../../assets/img/landmark-1.png" alt="" class="landmark" >
                  <h2 class="text-black">收货地址</h2>
                 <h5 class="text-gray1">
                 个人地址：{{passInfo.receive_city}}{{passInfo.receive_district}}{{passInfo.receive_addr}}
                 </h5>
                 <h5 class="text-gray1">
                  联系人：{{passInfo.receive_name}} &nbsp;&nbsp;&nbsp;&nbsp;手机号：{{passInfo.receive_phone}}
                 </h5>
                 <f7-icon f7="right" color="gray" class="color-gray"></f7-icon>
            </div>
        </f7-list>
          
            <!-- 时间 -->
                <f7-block class="text-align-center gap-20">
                            <h5  class="text-gray">计划编号：{{passInfo.index}}</h5>
                            <h5  class="text-gray">创建时间：{{passInfo.time_creation|dataFmt_fmt1('yyyy.MM.dd hh:mm')}}</h5>
                            <div></div>
                            <div></div>
                </f7-block>

      



         

       <div class="bg-white gap-20">
        <div class="list-company-checkbox">
                    <div class="item-car">
                        <img src="../../assets/img/bg-comhomepage.jpg" class="img-car">
                        <h3 class="text-blue">{{passInfo.truck_num}}</h3>
                        <h5 class="text-gray">{{passInfo.truck_weight}}吨</h5>
                        <h5 class="text-gray" >{{passInfo.status =='effective'?' 进行中':passInfo.status =='ineffective'?'待接单':'已完成'}}</h5>
                        <div class="right_picture">
                            <img src="../../assets/img/infor-face.png" class="infor-face">
                            <span>{{passInfo.user_name}}</span>
                        </div>
                        <f7-icon f7="right" color="gray" class="color-gray"></f7-icon>
                    </div>
        </div>
    </div>
      <f7-card class="card_nav">
            <f7-card-header>
                <div class="card-left">
                    <img src='../../assets/img/pass-icon.png' class="line-icon">
                    <div class="pull-left">
                        <b>{{passInfo.send_city}}</b>
                        <span>{{passInfo.send_district}}</span>
                        <span v-if="passInfo.time_cost">{{passInfo.time_cost.time_stamp|dataFmt_fmt1('MM-dd E')}}</span>
                    </div>
                </div>
                <div class="card-center">
                    <i>{{passInfo.amount_remain}}吨{{passInfo.category_chn}}</i>
                    <h5 class="status-bg text-orange ">￥{{passInfo.price}}元/吨</h5>
                </div>
                <div class="card-right">
                    <div class="pull-right">
                        <b>{{passInfo.receive_city}}</b>
                        <span>{{passInfo.receive_district}}</span>
                        <span>{{passInfo.time_arrival|dataFmt_fmt1('MM-dd E')}}</span>
                    </div>
                </div>
            </f7-card-header>
        </f7-card>
         <div class="row-wrap bg-white" v-for="item in passInfo.product_categories">
                  <p class="classification">
                            <img src='../../assets/img/label-goodsicon.png' class="label-icon-trade"> {{item.layer_1_chn}}
                        </p>
                        <div v-for="item1 in item.product_name">
                                <div class="item-add">
                                    <h5 class="bold text-green">{{item1.name}}</h5>
                                    <span v-for="item2 in item1.attribute">{{item2.name}} {{item2.value}}{{item2.unit}}</span>
                                </div>
                                <div class="item-fot text-gray">           
                                    运费<i class="text-orange">￥ {{passInfo.price}}(元/吨)</i>重量<i class="text-orange"> {{item1.amount}}吨</i>
                                    <span class="float-right"> {{item1.amount}}吨</span>
                                </div>
                                <div class="item-fot gap-5">
                                    <span> 已运输 {{item.pass_amount_allot}}吨</span>
                                </div>
                       </div>
            </div>

          <div class="bg-white gap-20">
                        <div class="list-inset">
                            <h4>
                                <span class="text-gray">总吨数</span>
                                <span class="float-right text-black ng-binding">{{passInfo.amount_remain}}吨</span>
                                
                            </h4>
                            <h4 class="clear">
                                <span class="text-gray">预计总金额</span>
                                <span class="float-right text-orange ng-binding">￥{{passInfo.price_total}}</span>
                                
                            </h4>
                        </div>
                    </div> 

     


     <div class="z_item">
            <div>
                <ul>
                    <li>
                        <span>提货起止时间</span>
                        <span class="z_item_rt" >自确认计划{{passInfo.time_tip_price}}日后提货</span>
                    </li>
                </ul>
                 <ul>
                    <li>
                        <span>收货时间</span>
                        <span class="z_item_rt" >{{passInfo.time_arrival|dataFmt_fmt1('yyyy年MM月dd日')}}</span>
                    </li>
                </ul>
            </div>

            <div>
                <ul>
                     <li>
                        <span>付款方式</span>
                        <span class="z_item_rt">{{passInfo.payment_method|payMent()}}</span>
                    </li>
                    <li>
                        <span>付款类型</span>
                        <span class="z_item_rt">{{passInfo.payment_choice|payMent()}}</span>
                    </li>
                    <li>
                        <span>付款时效</span>
                        <span class="z_item_rt">{{passInfo.time_settlement_style == 'day'?'按天数扣款':'忽略天数扣款'}}</span>
                    </li>
                    <li>
                        <span>结算标准</span>
                        <span class="z_item_rt">{{passInfo.weigh_settlement_style=='get'?'按提货吨数结算':'按交货吨数结算'}}</span>
                    </li>
                </ul>
            </div>
    </div>


    </f7-page>
</template>

<script>
    import F7Page from "framework7-vue/src/components/page";
    export default {
        name: "passIndent",
        components: {F7Page},
        data(){
            return{
                passInfo:''
            }
        },
        methods:{
            async getPassDlt () {
                let param = {order_id: this.$f7Route.params.orderId}
                this.passInfo = (await this.LineService.passIndentDtl(param)).data.data
            }
        },
        mounted(){
            this.getPassDlt()
        }
    }
</script>

<style scoped>
.order-car {
    width: 46px;
    height: 34px;
}
.item-order {
    background: #a2a2f0;
    padding: 16px;
    min-height: 50px;
}
.item-order h2{
    margin: 0 0 2px 0;
    font-size: 16px;
    font-weight: normal;
    color: #fff;
}
.text-lightwhite{
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 3px 0;
    font-size: 10px;
}
   .ios .list {
        margin: 0px;
        background: #fff;
    }

    .item-address {
        position: relative;
        border: none;
        padding: 10px 0 8px 50px;
        min-height: 0;
        border-bottom: 1px solid #f5f5f5;
    }

    .item-address h2 {
        color: #333;
        font-size: 14px;
        margin: 0;
    }

    .item-address h5 {
        color: #333;
        font-size: 12px;
        margin: 0;
    }

    .landmark {
        position: absolute;
        border-radius: 0;
        width: 21px;
        height: 30px;
        left: 15px;
        top: 12px;
    }

    .color-gray {
        position: absolute;
        top: 30px;
        color: #8e8e93;
        font-size: 20px;
        right: 10px;
    }
    .text-gray1 {
    color: #333;
}
.gap-20{
    margin-top: 20px !important;
}
.gap-5{
    margin-top: 5px;
}
.text-gray{
    color: #999;
}
.bg-white {
    background: #fff;
}
.list-company-checkbox {
    position: relative;
    padding-left: 15px;
    padding-bottom: 1px;
     border-bottom: 1px solid #f5f5f5;
}

.item-car{
    border: none;
    min-height: 64px;
    font-size: 14px;
    color: #444;
    position: relative;
    z-index: 2;
    margin: -1px;
    padding: 10px;
    padding-left: 50px;
    
}
.item-car .img-car{
    left: 0px;
    border-radius: 3px;
    width: 38px;
    height: 28px;
    top:12px;
    position: absolute;
}
.item-car h3{
    margin: 0 0 4px 0;
    font-size: 14px;
}
.text-blue {
    color: #3c35fe;
}
.item-car h5,.item-car h6 {
    margin: 0 0 3px 0;
    font-size: 10px;
}
.color-gray{
    position: absolute;
    top: 30px;
    color: #8e8e93;
    font-size: 20px;
    right: 10px;
}
.infor-face{
    max-width: 24px;
    max-height: 24px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.right_picture {
   position: absolute;
    top:15px;
    right: 25px;
    text-align: center;
}
.right_picture span{
    margin: 0 0 3px 0;
    font-size: 10px;
    color: #999;
    display: inherit;
}
.list-inset{
    margin: 20px 0px;
    padding: 15px 10px;
}
.clear {
    clear: both;
    margin-top: 10px;
}
.text-orange {
    color: #FF6C00;
}
/* 列表 */
.z_item ul {
    padding-left: 0;
    font: inherit;
    font-size: 100%;
    font-family: "\5FAE\8F6F\96C5\9ED1";
    color: #444;
}

.z_item li {
    background: white;
    padding-left: 10px;
    border-bottom: 1px solid #f5f5f5;
    line-height: 40px;
    font-weight: bold;
}

.z_item .z_item_rt {
    float: right;
    margin-right: 10px;
    color: #FF6C00;
    font-weight: normal;
}
/* 名片 */
.card_nav {
  padding: 10px 0px;
  border-radius: 0px !important;
  margin: 0px !important;
  box-shadow: none !important;
}
.ios .card-header {
  padding: 4px 15px;
  min-height: 55px;
  position: static;
}
.line-icon{
    position: absolute;
    left: 16px;
    width: 16px;
    height: 51px;
}
.pull-left{
    text-align: left;
    margin-left: 24px;
}
.pull-left {
    font-size: 14px;
    color: #000;
    display: block;
}
.pull-left span{
    font-size: 12px;
    color: #666;
    display: block;
    width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.card-center i{
    font-style: normal;
    color: #333;
    font-size: 12px;
    text-align: center;
    display: inherit;
}
.text-orange{
    color: #ff6c00 !important;
}
.status-bg {
  background: url('../../assets/img/route-bg.png') no-repeat top center;
  background-size: 95px 4px;
  margin-top: 6px;
  padding-top: 10px;
  width: 97px;
  text-align: center;
}
.card-right{
    text-align: center;
}
.pull-right{
    text-align: right;
}
.pull-right b{
    font-size: 14px;
    color: #000;
    display: block;
}
.pull-right span{
    margin: 0 0 3px 0;
    font-size: 10px;
    color: #999;
    display: inherit;
    width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 数据 */
.row-wrap {
  padding: 10px 0px 15px 15px;
  border-bottom: 1px solid #f5f5f5;
}
.item-add {
  background: #f8fff0;
  padding: 4px 10px;
  margin: 10px 0px;
  border-left: 1px solid green;
}

.item-add span {
  width: 50%;
  color: rgb(51, 140, 37);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
.item-fot{
    padding-right:10px;
}
.item-fot  i {
  color: #ff6c00;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  font-weight: initial;
  margin: 0px 6px 0px 4px;
}

.item-add h5 {
  margin: 5px 0px;
}

.item-fot span {
  font-size: 13px;
  color: #666;
}
.label-icon-trade {
  width: 32px;
  height: 16px;
  margin-right: 18px;
  margin-top: 2px;
  float: left;
}
.text-green {
    color: rgb(51, 140, 37);
}
.bold {
    font-weight: bold;
}
</style>